<template>
  <div class="container">
    <div id="container" ref="container"></div>
  </div>
  
</template>


<script>
import * as API from '@/api'
import icon from '@/assets/img/dp/local.png'
export default {
  data() {
    return {
      map: null,
      pointContent: [],
      makerList: [],
      zoom: 13
    }
  },

  mounted() {

    this.getData();
    this.init();
    this.map.on('zoomchange', (e) => {
      console.log(e.target.getZoom())
      let curZoom = e.target.getZoom();
      if(curZoom < 13.8 || curZoom > 7){
        this.zoom = curZoom
      } 
      this.map.setZoom(this.zoom)
    })
  },

  methods: {
    init() {
      this.map = new AMap.Map('container', {
        // mapStyle: 'amap://styles/4416694fe829823d3f7489adc4d488c7',
        resizeEnable: true, //是否监控地图容器尺寸变化
        center: ['113.8275530', '22.7528560'],
        // mapStyle: map_style,
        zoom: this.zoom,
        zooms: [7, 13.8],
        pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D', // 地图模式
      });
    },
    getData() {
      this.pageflag = true
      API.GET('/super/screen/site_list').then(res => {
        console.log('map',res)
        
        if(res.code === 1){
          let zk = [];
          let xh = [];
          res.data.map((item, index)=>{
            if(item.brand_key === "zhongke"){
              zk = [...item.data]
            } else {
              xh = [...item.data]
            }
          })
          this.makerList = [...zk, ...xh]
          this.addMarker();
        } else {
          this.pageflag = false
        }
      })
    },
    addMarker() {
      // 创建 AMap.Icon 实例：
      var markerContent = '' +
          '<div class="custom-content-marker">' +
          '   <img style="width:32px;" src="'+icon+'">' +
          '</div>';
      this.makerList.map((item, index)=>{
        console.log(item)
        let temp = new window.AMap.Marker({
          position: new window.AMap.LngLat(
            item.longitude,
            item.latitude
          ),
          content: markerContent,
          offset: new AMap.Pixel(-13, -30),
          // content: content
          // content: `<i class="normal normal1001 animate1001 amapMarker ${index} "></i>`,
          // clickable: true,
          // topWhenClick: true,
          zIndex: index,
          // offset: new window.AMap.Pixel(-24, -22)
        })
        this.pointContent.push(temp)
      })
      
      this.map.add(this.pointContent) //添加图层到地图
     
      // var marker = new AMap.Marker({
      //     position: position,
      //     // 将 html 传给 content
      //     content: markerContent,
      //     // 以 icon 的 [center bottom] 为原点
      //     offset: new AMap.Pixel(-13, -30)
      // });

      // this.map.add(marker);
    }
  }

}

</script>


<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}
 #container {
  height: 100%;
  width: 100%;
  // margin-top: 20px;
  // margin-bottom: 10px;
  position: relative;
  .normal {
    width: 50px;
    height: 50px;
    display: block;
    background-size: 50px 50px;
    position: absolute;
    &.normal1001 {
      // background-image: url('../../assets/point/zhengchang1.png');
    }
  }
}
</style>